import React, {Component} from 'react';
import './App.css';
import axios from "axios";
import {List, Menu, Avatar, Input, Button, Icon} from 'antd';
import {withRouter} from "react-router-dom";

const Search = Input.Search;
const STATE_NAME = 'state1546068496081T';

class App extends Component {
  constructor(props) {

    console.log("constructor");
    super(props);

    this.state = {
      complete: false
    };

    this.handleClick = this.handleClick.bind(this);
  }

  componentWillMount() {
    console.log("componentWillMount");

    let state = localStorage.getItem(STATE_NAME);
    if (state) {
      this.setState(JSON.parse(state));
    }
  }

  componentDidMount() {
    console.log("componentDidMount");

    if (!this.state.complete) {
      axios.get('/api/today').then(resp => {
        let list = resp.data.category;
        let results = resp.data.results;
        this.setState({
          complete: true,
          list: list,
          current: list[0],
          results: results
        })
      })
    }
  }

  render() {
    let menu = null;
    let {complete, list, current, results} = this.state;
    let data = [];
    if (complete) {
      menu = list.map(str => {
        return <Menu.Item key={str}>{str}</Menu.Item>
      })

      data = results[current];
    }
    return (
      <div className="App">
        <Menu
          onClick={this.handleClick}
          selectedKeys={[this.state.current]}
          mode="horizontal"
        >
          {menu}
        </Menu>
        <Search
          className="search"
          placeholder="搜索"
          onSearch={value => this.onSearch(value)}
          enterButton
        />
        <List
          itemLayout="vertical"
          bordered
          dataSource={data}
          renderItem={item => (
            <List.Item
              extra={<img width={160} alt="logo"
                          src={item.images ? item.images[0] : 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png'}/>}
              key={item._id}
              onClick={(e) => this.onItemClick(e, item)}
            >
              <List.Item.Meta
                avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>}
                title={item.who}
              />
              {item.desc}
            </List.Item>
          )}
        />
       {/* <Button.Group className="BottomGroup">
          <Button type="primary">
            <Icon type="left"/>Go back
          </Button>
          <Button type="primary">
            Go forward<Icon type="right"/>
          </Button>
        </Button.Group>*/}
        <br/>
        <Button.Group className="BottomGroup">
          <Button onClick={(e) => this.onXianduClick(e)}>闲读</Button>
          <Button onClick={(e) => this.onBouns(e)}>福利</Button>
        </Button.Group>
      </div>
    );
  }

  handleClick(e) {
    console.log('click', e);
    this.setState({
      current: e.key,
    });
  }

  onItemClick(e, item) {
    console.log(item, this.state)

    window.open(item.url);
  }

  onXianduClick(e) {
    console.log("xiandu");

    window.open("http://liechang.gitee.io/gank-react/")
  }

  onBouns(e) {
    localStorage.setItem(STATE_NAME, JSON.stringify(this.state));
    this.props.history.push({
      pathname: '/bonus'
    })
  }

  onSearch(value) {
    console.log(value);

    localStorage.setItem(STATE_NAME, JSON.stringify(this.state));

    this.props.history.push({
      pathname: '/search',
      state: {value: value, category: this.state.current}
    })
  }
}

export default withRouter(App);
